<template>
  <!-- 面包屑 -->
  <!-- <el-breadcrumb separator="/" class="bread">
    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item><a href="/">活动管理</a></el-breadcrumb-item>
    <el-breadcrumb-item>活动列表</el-breadcrumb-item>
    <el-breadcrumb-item>活动详情</el-breadcrumb-item>
  </el-breadcrumb> -->
  <div>
    <el-avatar :src="headimgurl" class="img1">user</el-avatar>
  </div>

  <!-- 自己写表格 -->
  <div class="zsb">
    <h1 class="left">我的中心</h1>
    <button class="right">操作</button>
  </div>
  <table>
    <tr>
      <td>unid</td>
      <td>{{ userInfo.unid }}</td>
      <td>账号</td>
      <td>{{ userInfo.username }}</td>
    </tr>
    <tr>
      <td>vip登记</td>
      <td>{{ userInfo.vipLevel }}</td>
      <td>vip到期时间</td>
      <td>{{ userInfo.vipExpires }}</td>
    </tr>
    <tr>
      <td>昵称</td>
      <td>{{ userInfo.nickname }}</td>
      <td>手机号</td>
      <td>{{ userInfo.phone }}</td>
    </tr>
    <tr>
      <td>角色名称</td>
      <td>{{ userInfo.roleName }}</td>
      <td>性别</td>
      <td>{{ userInfo.sex }}</td>
    </tr>
    <tr>
      <td>省份</td>
      <td>{{ userInfo.province }}</td>
      <td>城市</td>
      <td>{{ userInfo.city }}</td>
    </tr>
  </table>
</template>

<script setup>
import { ref } from 'vue';
import { useUser } from '../../../store/users';
import { storeToRefs } from 'pinia';
let userStore = useUser();
let { userInfo } = storeToRefs(userStore);
let { headimgurl } = userInfo.value;
console.log(userInfo);
const tableData = ref([]);
</script>
<script>
export default {
  meta: {
    name: '个人中心',
    title: 'wdzx',
    icon: '#icon-shouye'
  }
};
</script>

<style scoped>
.bread {
  margin: 10px 0;
}

.el-avatar {
  position: relative;
  left: 50%;
  margin-left: -100px;
  width: 200px;
  height: 200px;
  border-radius: 0;
}
td {
  border: 1px solid;
  line-height: 40px;
}
table {
  margin-top: 40px;
  width: 100%;
  border-collapse: collapse;
}
.left {
  float: left;
}
.right {
  float: right;
  background-color: blue;
  width: 50px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border: none;
  color: white;
  border-radius: 5px;
}
</style>
